<template>
    <div>
        <div style="margin-bottom: 10px">
                <Button @click="btn_add_requirement" style="margin-right: 5px">发布需求</Button>
                <Button @click="btn_refresh">刷新</Button>  
        </div>
        <!-- 列表区域 -->
        <i-table border stripe  :columns="format" :data="show_list" height="720">
            <template slot-scope="{ row, index }" slot="action">
                <Button type="primary" style="margin-bottom: 5px;margin-right:5px;"  @click="btn_edit_requirement(index)">编辑</Button>
            </template>
        </i-table >
        <div style="text-align: center;margin-top: 10px;">
            <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" show-total/>
        </div>
        <!-- 创建requirement模态框 -->
        <Modal v-model="show_add_requirement_modal" draggable  width="800">
            <p slot="header" style="color:#f60;text-align:center">
                {{requirement.service}}<span>发布需求</span>
            </p>
            <div >
                <Form ref="requirement" :model="requirement" :rules="requirement_rules" label-position="left"  :label-width="100">
                   <Form-Item label="选择项目" prop="project">
                        <Select v-model="requirement.project" @on-change="project_change">
                            <Option v-for="project in project_list" :key="project" :value="project">{{ project }}</Option>
                        </Select>
                    </Form-Item> 
                    <FormItem label="选择服务" prop="service_list">
                        <CheckboxGroup v-model="requirement.service_list">
                            <Checkbox  v-for="service in service_list" :label="service" :key="service" :value="service">{{service}}</Checkbox>
                        </CheckboxGroup>
                    </FormItem>
                    <Form-Item label="需求名称" prop="name">
                        <Input  v-model="requirement.name" placeholder="输入需求名称"/>
                    </Form-Item>
                </Form> 
            </div>
            <div slot="footer">
                <Button type="primary" size="large"  @click="submit_add_requirement('requirement')">提交</Button>
            </div>
        </Modal>
        <!-- 编辑requirement模态框 -->
        <Modal v-model="show_edit_requirement_modal" draggable  width="1000">
            <p slot="header" style="color:#f60;text-align:center">
               <span>编辑需求</span>
            </p>
            <div >
                <Form ref="requirement_edit" :model="requirement_edit" :rules="requirement_rules" label-position="left"  :label-width="100" inline>
                    <Form-Item label="项目" prop="project">
                        <Input v-model="requirement_edit.project" disabled />
                    </Form-Item> 
                    <Form-Item label="状态"  prop="status">
                        <Select v-model="requirement_edit.status"  style="width:100px" >
                            <template v-for="status in status_list" >
                                <Option :key="status" :value="status" v-if="status === requirement_edit.status"  selected>{{ status }}</Option>
                                <Option :key="status" :value="status" v-else>{{ status }} </Option>
                            </template>
                        </Select>
                    </Form-Item>
                    <FormItem label="选择服务" prop="service_list">
                        <CheckboxGroup v-model="requirement_edit.service_list">
                            <template v-for="service in service_list" >
                                <Checkbox  :label="service" :key="service" :value="service" v-if="service in requirement_edit.service_list" checked>{{service}}</Checkbox>
                                <Checkbox :label="service" :key="service" :value="service" v-else>{{service}}</Checkbox>
                            </template>
                        </CheckboxGroup>
                    </FormItem>
                    <p style="margin:0 0 20px 150px;">已选: {{ requirement_edit.service_list.join(',') }}</p>
                    <Form-Item label="需求名字" prop="name">
                        <Input  v-model="requirement_edit.name" style="width:800px"/>
                    </Form-Item>
                    <Form-Item label="需求内容:" prop="content">
                        <MyEditor  ref='myEditor' v-model="requirement_edit.content"   :defaultContent="requirement_edit.content" style="height:450px; width: 800px"></MyEditor>

                    </Form-Item>

                </Form> 
            </div>
            <div slot="footer">
                <Button type="primary" size="large"  @click="submit_edit_requirement('requirement_edit')">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>

import { post } from  '@/api/http'
import {
    requirement_add,
    requirement_list,
    requirement_update,
    get_project_name_list,
    get_service_by_project,
} from '@/api';

import MyEditor from '@/lib/editor/myEditor';
export default {
    components:{
        MyEditor
    },
    data() {
        return {
            format: [
                {
                    title: '项目',key: 'project'
                },
                {
                    title: '服务/模块',key: 'service_list',                    
                    render: (h,params) => {
                        return h('div',[
                            h('p',params.row.service_list.join(','))
                        ])
                    }
                },
                {
                    title: '需求名称',key: 'name',
                },
                {
                    title: '需求内容',key: 'content',tooltip: true,ellipsis: true,
                },
                {
                    title: '发布人员',key: 'create_user'
                },
                {
                    title: '研发人员',key: 'deal_user'
                },
                {
                    title: '状态',key: 'status'
                },
                {
                    title: '创建时间',key: 'create_time'
                },
                {
                    title: '操作',slot: 'action',width: 200,align: 'center'
                }
            ],
            // 新增站点绑定
            requirement: {
                project: '',
                service_list: [],  //checkgroup 要求这里是数组
                name: '',
            },
            // 项目列表
            project_list: [],
            // 服务列表
            service_list: [],
            requirement_rules: {
                project:[
                    {required: true,message:"请选择好项目",trigger: 'blur'},
                ],
            },
            show_add_requirement_modal: false,
            // 编辑数据
            requirement_edit: {
                project: '',
                service_list: [],
                name: '',
                content: '',
                status: '',
            },
            status_list: ['创建','研发','测试','已上线'],
            show_edit_requirement_modal:false,
            
            show_list: [],
            // 分页
            total: 0,
            pageSize: 15,
        }
    },
    methods: {
    
        btn_refresh(){
            this.refresh()
        },
        // 提交修改事件
        submit_edit_requirement(name){
            console.log(name)
            let data = {'requirement':this.requirement_edit}
            post(requirement_update,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('更新成功')
                    this.show_edit_requirement_modal = false
                    this.refresh()
                }else {
                    alert("更新失败:",info)
                }
            })
        },
        // 编辑requirement事项事件
        btn_edit_requirement(index){
            let requirement =  JSON.parse(JSON.stringify(this.show_list[index]))
            this.requirement_edit = requirement
            this.get_project()
            let project_name = this.requirement_edit.project
            this.get_service(project_name)

            setTimeout(() =>{
                this.show_edit_requirement_modal=true
            },200); 
            
        },
        // 获取项目列表
        get_project(){
            post(get_project_name_list).then(response=>{
                this.project_list = response.data
            })
        },
        // 项目选择事件
        project_change(){
            this.requirement.service = ''
            let project_name = this.requirement.project
            this.get_service(project_name)
        },

        // 根据项目获取服务
        get_service(project_name){
            let data = {"project_name": project_name}
            post(get_service_by_project,data).then(response=>{
                this.service_list = response.data
            })
        },
        // 创建requirement点击事件
        btn_add_requirement(){
            this.get_project()
            setTimeout(() =>{
                this.show_add_requirement_modal = true
            },200); 
        },

        submit_add_requirement(name){
            console.log(name)
            let data = {'requirement':this.requirement}
            post(requirement_add,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('添加成功')
                    this.show_add_requirement_modal = false
                    this.refresh()
                }else {
                    alert("添加失败:"+info)
                }
            })
        },
        changePage(index) {
            let _start = (index -1) * this.pageSize
            let _end = index * this.pageSize
            this.show_list = this.total_list.slice(_start,_end)
        },
        refresh() {
            this.get_project()
            post(requirement_list).then( (response) => {
                this.total_list = response.data
                this.total = response.data.length
                if(this.total < this.pageSize) {
                    this.show_list = this.total_list
                }else {
                    let currentPage = this.$refs.page.currentPage
                    let _start = (currentPage-1) * this.pageSize
                    let _end = currentPage * this.pageSize
                    this.show_list = this.total_list.slice(_start,_end)
                }
            })
        }
    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
    }
}
</script>
<style scoped>

</style>